<%@ page contentType="text/html; charset=utf-8" %>
<%@ include file="/WEB-INF/jsp/includeTop.jsp" %>
<%@ include file="/WEB-INF/jsp/includeTaglib.jsp" %>

<link href="./js/Date/calendar-win2k-cold-1.css" rel="stylesheet"
	media="all" title="win2k-cold-1" type="text/css" />
<script src="./js/Date/calendar-setup.js" type="text/javascript"></script>
<script src="./js/Date/calendar.js" type="text/javascript"></script>
<script src="./js/Date/calendar-cn.js" type="text/javascript"></script>
	<style type="text/css">
	#feedback { font-size: 1.4em; }
	#selectable .ui-selecting { background: #FECA40; }
	#selectable .ui-selected { background: #F39814; color: white; }
	#selectable { list-style-type: none; margin: 0; padding: 0; }
	#selectable li { margin:2px; padding: 1px; float: left; font-size: 1.4em; text-align: center; }
	</style>
<table width="100%" border="0" cellpadding="0" cellspacing="5">
  <tr>
    <td valign="top">
      <table class="dbborder" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="bottom" class="blueTableBg">&nbsp;通信时间模板管理&nbsp;-&nbsp;编辑模板</td>
        </tr>
        <tr>
          <td>
            <table width="100%" border="0" cellpadding="0" cellspacing="5">
              <tr>
                <td>
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td class="dashTopLeft"><img src="images/spacer.gif" width="7" height="7"></td>
                      <td class="dashTop" width=100%><img src="images/spacer.gif" width="7" height="7"></td>
                      <td class="dashTopRight"><img src="images/spacer.gif" width="7" height="7"></td>
                    </tr>
                    <tr>
                      <td class="dashLeft"><img src="images/spacer.gif" width="7" height="7"></td>
                      <td align="center">
                        <table width="100%" border="0" cellpadding="0" cellspacing="3">
                          <form id="editTimeTemplateForm" method="post">
		                      <input type="hidden" name="updatekey" value="${timeTemplate.id}">
<!--                          <tr>-->
<!--	                             <td width="114" height="20" class="globalText">生效日期</td>-->
<!--	                           -->
<!--	                           -->
<!--	                            <td width="210"><input id="dateFrom" name="availDate" type="text" style="width:148px;"-->
<!--							maxlength="30" readonly="true"-->
<!--							value="<fmt:formatDate pattern="yyyy-MM-dd" value="${timeTemplate.availDate}"/>"-->
<!--							onkeydown="return deleteDate(this.id,event)" /> <a href="#"-->
<!--							onClick="showCalendar('dateFrom','imageDate1', '%Y-%m-%d')">-->
<!--							<img id="imageDate1" name="imageDate1"-->
<!--							src="./js/Date/flight-date.gif" width="25" height="21" border="0"-->
<!--							align="absbottom"></a>-->
<!--							<div id="errorMessage" />-->
<!--							</td>-->
<!--								-->
<!--								-->
<!--                          </tr>-->
                          <tr>
                            <td width="114" height="20" class="globalText">非工作日发送</td>
                            <td height="20" class="globalText">
                            <input type="radio" class="txtbox" size="20" name="workFlag" value="1" <c:if test="${timeTemplate.workFlag == '1'}">checked</c:if> />是
                            <input type="radio" class="txtbox" size="20" name="workFlag" value="0" <c:if test="${timeTemplate.workFlag == '0'}">checked</c:if>/>否
                            </td>
                          </tr>
                          <tr>
                             <td width="114" height="20" class="globalText">通信时间描述</td>
                            <td height="20" class="globalText" >
                            	<input id="timeDescription" type="text" class="txtbox" size="20" name="timeDescription" value="${timeTemplate.timeDescription}"/>
                            </td>
                          </tr>
                          <tr>
                            <td width="114" height="20" class="globalText">通信时间选择</td>
                            <td height="20" class="globalText" >
<ol id="selectable">
	<li value="1" class="ui-state-default">1</li>
	<li value="2" class="ui-state-default">2</li>
	<li value="3" class="ui-state-default">3</li>
	<li value="4" class="ui-state-default">4</li>
	<li value="5" class="ui-state-default">5</li>
	<li value="6" class="ui-state-default">6</li>
	<li value="7" class="ui-state-default">7</li>
	<li value="8" class="ui-state-default">8</li>
	<li value="9" class="ui-state-default">9</li>
	<li value="10" class="ui-state-default">10</li>
	<li value="11" class="ui-state-default">11</li>
	<li value="12" class="ui-state-default">12</li>
	<li value="13" class="ui-state-default">13</li>
	<li value="14" class="ui-state-default">14</li>
	<li value="15" class="ui-state-default">15</li>
	<li value="16" class="ui-state-default">16</li>
	<li value="17" class="ui-state-default">17</li>
	<li value="18" class="ui-state-default">18</li>
	<li value="19" class="ui-state-default">19</li>
	<li value="20" class="ui-state-default">20</li>
	<li value="21" class="ui-state-default">21</li>
	<li value="22" class="ui-state-default">22</li>
	<li value="23" class="ui-state-default">23</li>
	<li value="24" class="ui-state-default">24</li>
</ol>                            
                            	<input id="timeSegment" type="hidden" name="timeSegment" value="${timeTemplate.timeSegment}"/>
                            </td>
                          </tr>
                          <tr>
                            <td align="center" colspan="2">
                              <table border="0" cellpadding="0" cellspacing="2">
                                <tr>
                                  <td><input type="button" class="btnStyle" value="  保存  " onclick="javascript:doSubmit()"></td>
                                  <td><input type="button" class="btnStyle" value="  取消  " onclick="javascript:doCancel()"></td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                          </form>
                        </table>
                      </td>
                      <td class="dashRight"><img src="images/spacer.gif" width="7" height="7"></td>
                    </tr>
                    <tr>
                      <td class="dashBottomLeft"><img src="images/spacer.gif" width="7" height="7"></td>
                      <td class="dashBottom" width=100%><img src="images/spacer.gif" width="7" height="7"></td>
                      <td class="dashBottomRight"><img src="images/spacer.gif" width="7" height="7"></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<script language="javascript">
	
	function doSubmit(){	
	  var timeDescription = document.getElementById("timeDescription").value.trim();
		if (validateEmpty(timeDescription)) {
			alert("通信时间描述 不能为空");
			return false;
		}
		
	  var timeSegment = document.getElementById("timeSegment").value.trim();
		if (validateEmpty(timeSegment)) {
			alert("通信时间选择 不能为空");
			return false;
		}

		document.getElementById("editTimeTemplateForm").action = "<c:url value='editTimeTemplate.html' />";
		document.getElementById("editTimeTemplateForm").submit();
	}
	
	function doCancel(){
		document.getElementById("editTimeTemplateForm").action = "<c:url value='timeTemplateMain.html' />";	
		document.getElementById("editTimeTemplateForm").submit();
	}

	$(function() {
		var currentTimeSegment = $("#timeSegment").val();
		var currentTimes = currentTimeSegment.split(",");
		
		for(var i=0;i<currentTimes.length;i++) {
			var time = currentTimes[i];
			
			if(time.indexOf("~") == -1) {//时点
				$("#selectable").find("li[value="+time+"]").attr("class", "ui-state-default ui-selectee ui-selected");
			} else {
				var timeRange = time.split("~");

				for(var j=parseInt(timeRange[0]);j<=parseInt(timeRange[1]);j++) {
					$("#selectable").find("li[value="+j+"]").attr("class", "ui-state-default ui-selectee ui-selected");
				}
			}
				
		}
		
		$("#selectable").selectable({
			stop: function(event, ui) {
			  var timeSelect = $(this).find("li[class*=ui-selected]");
			  var times = "";
			  var lastTime = 0;
			  var lastMax = 0;
			  for(var i=0;i<timeSelect.length;i++) {
				  var currentTime = parseInt(timeSelect[i].value);
				  if (i==0) {
					  times += currentTime + ",";
					} else {
					  if ((currentTime - lastTime) != 1) {//非连续
						  times += currentTime + ",";
						  if (lastMax != 0) times = times.replace(","+currentTime+",", "~"+lastMax+","+currentTime+",");
						  lastMax = 0;
						} else {
							lastMax = currentTime;
							
							if (i == timeSelect.length-1) {//连续且扫描至最后
								times += currentTime + ",";
								times = times.replace(","+currentTime+",", "~"+currentTime);
							}
						}
					}
				  lastTime = currentTime;
				}
			  times = times.trim().trimComma();
			  $("#timeSegment").val(times);
			}
		});
		
	});

</script>